<!--  -->
<template>
  <uv-picker
    ref="codePickerRef"
    round="8"
    :columns="[
      phoneRegionCode.map(
        (el) => el.phone_code + ' ' + el[langKey[currentLanguage.key]]
      ),
    ]"
    @confirm="codePickerConfirm"
    :confirmText="currentLanguageTexts.confirm"
    :cancelText="currentLanguageTexts.cancel"
  />
</template>

<script setup>
import { phoneRegionCode } from '@/utils/region-code';
import { ref } from 'vue';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
const main = useMainStore();
const { currentLanguageTexts, currentLanguage } = storeToRefs(main);
const codePickerRef = ref();
const emit = defineEmits(['confirm']);
const open = () => {
  codePickerRef.value.open();
};
const langKey = {
  en: 'english_name',
  'zh-CN': 'chinese_name',
  km: 'khmer_name',
};
const codePickerConfirm = ({ value }) => {
  const arr = value[0].split(' ');
  emit('confirm', arr[0]);
};
defineExpose({
  open,
});
</script>

<style lang="scss" scoped></style>
